<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="用能单位">
              <j-dict-select-tag
                type="list"
                v-model="queryParam.unitPart"
                dictCode="ene_workshop,name,id"
              />
<!--              <a-select v-model="queryParam.unitPart" style="width: 100%;">-->
<!--                <a-select-option value="all" key="all">全部</a-select-option>-->
<!--                <a-select-option v-for="item in unitList" :value="item.id" :key="item.id">-->
<!--                  {{ item.name }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="时间">
              <a-date-picker style="width: 100%;" format="YYYY" mode="year" :value="queryParam.outputTime" :open="open"
                @openChange="openChange" @panelChange="panelChange" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="margin-bottom: 8px;">
      <a-row :gutter="14">
        <a-col span="14">
          <div style="display: flex;margin-bottom: 8px;">
            <div style="height: 24px;width: 8px;background-color: #F59A23; margin-right: 8px;"></div>
            <div style="font-size: 16px;font-weight: 550;">产值</div>
          </div>
          <a-card style="height: 500px;width: 100%;border-radius: 10px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.09)">
            <a-card
              style="height: 100px;width: 100%;border-radius: 10px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 16px;">
              <div style="width: 100%;height: 100%;margin-top: 8px;display: flex; align-items:center">
                <div style="font-size: 24px;font-weight: 550; color: #666EE8;margin-left: 8px;margin-right: 16px;">
                  总产值：{{ totalValue }}（元）</div>
                <img src="~@assets/u130.svg" style="margin-right: 8px;" />
                <div style="font-size: 18px;font-weight: 500; color: green;">同比+{{ QOQ }}%</div>
                <!-- <img src="~@assets/u131.svg" style="margin-right: 8px;"/>
                <div style="font-size: 18px;font-weight: 500; color: #BA4F51;">同比-10%</div> -->
              </div>
            </a-card>
            <a-card style="height: 340px;width: 100%;border-radius: 10px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.09)">
              <div style="height: 300px;width: 100%;" id="output_price"></div>
            </a-card>
          </a-card>
        </a-col>
        <a-col span="10">
          <div style="display: flex;margin-bottom: 8px;">
            <div style="height: 24px;width: 8px;background-color: #F59A23; margin-right: 8px;"></div>
            <div style="font-size: 16px;font-weight: 550;">能源效率</div>
          </div>
          <a-card
            style="height: 230px;width: 100%;border-radius: 10px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.09);margin-bottom: 8px;">
            <div style="height: 190px;width: 100%;" id="unit_output_elec"></div>
          </a-card>
          <div style="display: flex;margin-bottom: 8px;">
            <div style="height: 24px;width: 8px;background-color: #F59A23; margin-right: 8px;"></div>
            <div style="font-size: 16px;font-weight: 550;">单位产值能耗</div>
          </div>
          <a-card style="height: 230px;width: 100%;border-radius: 10px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.09)">
            <div style="height: 190px;width: 100%;" id="unit_output_price"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap1"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>

    <tsl-output-modal ref="modalForm" @ok="modalFormOk"></tsl-output-modal>
  </a-card>
</template>

<script>

import '@assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TslOutputModal from './modules/TslOutputModal.vue'
import * as echarts from 'echarts';
import dayjs from 'dayjs'
import { getAction } from "@api/manage";

export default {
  name: 'TslOutputList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    TslOutputModal
  },
  data() {
    return {
      description: '产值能耗管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '用能单位',
          align: "center",
          dataIndex: 'unitPart_dictText'
        },
        {
          title: '产值（元）',
          align: "center",
          dataIndex: 'outputPrice'
        },
        {
          title: '用电量（kwh）',
          align: "center",
          dataIndex: 'useElec'
        },
        {
          title: '电耗费用合计（元）',
          align: "center",
          dataIndex: 'priceElec'
        },
        {
          title: '单位产值能耗（元/元）',
          align: "center",
          dataIndex: 'unitOutputPrice'
        },
        {
          title: '能源效率（kwh/元）',
          align: "center",
          dataIndex: 'unitOutputElec'
        },
        {
          title: '时间',
          align: "center",
          dataIndex: 'outputTime'
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: "center",
        //   fixed: "right",
        //   width: 170,
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      url: {
        list: "/output/tslOutput/list",
        delete: "/output/tslOutput/delete",
        deleteBatch: "/output/tslOutput/deleteBatch",
        exportXlsUrl: "/output/tslOutput/exportXls",
        importExcelUrl: "output/tslOutput/importExcel",
        count: "/output/tslOutput/total",
        chart: "/output/tslOutput/chart"
      },
      dictOptions: {},
      superFieldList: [],
      unitList: [],
      open: false,
      year: dayjs(),
      queryParam: {
        outputTime: dayjs(new Date()).format("YYYY"),
        unitPart: "全部",
      },
      totalValue: 0,
      QOQ: 100,
    }
  },
  created() {
    this.getSuperFieldList();
    this.getDict();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  mounted() {
    // this.initoutputPrice()
    // this.initunitOutputElec()
    // this.initunitOutputPrice()


    this.getCountNub()
    this.getChart()
  },
  methods: {
    searchQuery() {
      this.loadData(1);

      this.getCountNub();
      this.getChart()
      // 点击查询清空列表选中行
      // https://gitee.com/jeecg/jeecg-boot/issues/I4KTU1
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    getCountNub() {
      getAction(this.url.count, this.queryParam).then((res) => {
        if (res.success) {
          this.totalValue = res.result.now
          if (res.result.old != 0) {
            this.QOQ = (res.result.now - res.result.old) / res.result.old
          }
        } else {
          this.totalValue = 0
          this.QOQ = 0
        }
      })
    },
    getChart() {
      getAction(this.url.chart, this.queryParam).then((res) => {
        if (res.success) {
          if (Object.keys(res.result).length > 0) {
            let rihuaData = res.result['1869224885970251777']||{};
            let rihuaOutputPrice = Array.from(Object.values(rihuaData), x => x.outputPrice)
            let rihuaUnitOutputElec = Array.from(Object.values(rihuaData), x => x.unitOutputElec)
            let rihuaUnitOutputPrice = Array.from(Object.values(rihuaData), x => x.unitOutputPrice)
          
            let jiankangOutputPrice = Array.from(Object.values(res.result['1848896072094175233']|{}), x => x.outputPrice)
            let jiankangUnitOutputElec = Array.from(Object.values(res.result['1848896072094175233']|{}), x => x.unitOutputElec)
            let jiankangUnitOutputPrice = Array.from(Object.values(res.result['1848896072094175233']|{}), x => x.unitOutputPrice)

            console.log(rihuaOutputPrice,jiankangOutputPrice)
            this.initoutputPrice(jiankangOutputPrice, rihuaOutputPrice)
            this.initunitOutputElec(jiankangUnitOutputElec, rihuaUnitOutputElec)
            this.initunitOutputPrice(jiankangUnitOutputPrice, rihuaUnitOutputPrice)
          } else {
            let rihuaOutputPrice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let rihuaUnitOutputElec = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let rihuaUnitOutputPrice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let jiankangOutputPrice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let jiankangUnitOutputElec = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let jiankangUnitOutputPrice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            this.initoutputPrice(jiankangOutputPrice, rihuaOutputPrice)
            this.initunitOutputElec(jiankangUnitOutputElec, rihuaUnitOutputElec)
            this.initunitOutputPrice(jiankangUnitOutputPrice, rihuaUnitOutputPrice)
          }
        }
      })
    },
    searchReset() {
      this.queryParam.outputTime = dayjs(new Date()).format("YYYY");
      this.queryParam.unitPart = "全部";
      this.loadData(1);
      this.getCountNub();
      this.getChart()
    },
    dayjs,
    //Ant Design封装年份选择组件
    openChange(status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    panelChange(value) {
      this.queryParam.outputTime = dayjs(value).format("YYYY");
      this.open = false;
    },
    getDict() {
      // this.$http.get(`/output/xsdOutput/getDict`).then(res => {
      //   this.unitList = res.result
      // })
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'unitPart', text: '用能单位', dictCode: '' })
      fieldList.push({ type: 'double', value: 'outputPrice', text: '产值（元）', dictCode: '' })
      fieldList.push({ type: 'double', value: 'useElec', text: '用电量（kwh）', dictCode: '' })
      fieldList.push({ type: 'double', value: 'priceElec', text: '电耗费用合计（元）', dictCode: '' })
      fieldList.push({ type: 'double', value: 'unitOutputPrice', text: '单位产值能耗（元/元）', dictCode: '' })
      fieldList.push({ type: 'double', value: 'unitOutputElec', text: '能源效率（kwh/元）', dictCode: '' })
      fieldList.push({ type: 'string', value: 'outputTime', text: '时间', dictCode: '' })
      this.superFieldList = fieldList
    },
    initoutputPrice(data1, data2) {
      const myChart = echarts.init(document.getElementById('output_price'));
      const option = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '12%',
          left: '5%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          data: ['生产车间', '液洗车间']
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '产值单位：元',
          }
        ],
        series: [
          {
            name: '生产车间',
            type: 'bar',
            data: data1,
            itemStyle: {
              normal: {
                color: '#666EE8'
              }
            }
          },
          {
            name: '液洗车间',
            type: 'bar',
            data: data2,
            itemStyle: {
              normal: {
                color: '#FF6262'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 100);

    },

    initunitOutputElec(data1, data2) {
      const myChart = echarts.init(document.getElementById('unit_output_elec'));
      const option = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '15%',
          left: '8%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          data: ['生产', '液洗']
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：kwh/元',
          }
        ],
        series: [
          {
            symbol: 'none',
            name: '生产',
            type: 'line',
            data: data1,
            itemStyle: {
              normal: {
                color: '#666EE8'
              }
            }
          },
          {
            symbol: 'none',
            name: '液洗',
            type: 'line',
            data: data2,
            itemStyle: {
              normal: {
                color: '#FF6262'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 100);
    },

    initunitOutputPrice(data1, data2) {
      const myChart = echarts.init(document.getElementById('unit_output_price'));
      const option = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '15%',
          left: '6%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          data: ['生产', '液洗']
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：元/元',
          }
        ],
        series: [
          {
            symbol: 'none',
            name: '生产',
            type: 'line',
            data: data1,
            itemStyle: {
              normal: {
                color: '#666EE8'
              }
            }
          },
          {
            symbol: 'none',
            name: '液洗',
            type: 'line',
            data: data2,
            itemStyle: {
              normal: {
                color: '#FF6262'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 100);
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>